<template>
  <div class="stats-panel">
    <h3>数据统计</h3>
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-title">用户总数</div>
        <div class="stat-value">1,234</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">内容总数</div>
        <div class="stat-value">567</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">本周访问量</div>
        <div class="stat-value">8,900</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">今日新增</div>
        <div class="stat-value">23</div>
      </div>
    </div>
    <div class="chart-section">
      <h4>本周访问趋势</h4>
      <div ref="chartRef" class="chart-box"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
let echarts;
const chartRef = ref(null);
const chartData = {
  days: ['周一','周二','周三','周四','周五','周六','周日'],
  visits: [1200, 1500, 1800, 1600, 2000, 2100, 1700]
};
onMounted(async () => {
  if (!window.echarts) {
    echarts = await import('echarts');
    window.echarts = echarts;
  } else {
    echarts = window.echarts;
  }
  const chart = echarts.init(chartRef.value);
  chart.setOption({
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: chartData.days },
    yAxis: { type: 'value' },
    series: [{
      data: chartData.visits,
      type: 'line',
      smooth: true,
      areaStyle: { color: '#e3f0ff' },
      lineStyle: { color: '#1976d2' },
      symbol: 'circle',
      symbolSize: 8
    }]
  });
});
</script>

<style scoped>
.stats-panel {
  width: 100%;
}
.stats-cards {
  display: flex;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.stat-card {
  background: #f8fafc;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  padding: 22px 36px 18px 36px;
  min-width: 160px;
  flex: 1;
  text-align: center;
}
.stat-title {
  color: #888;
  font-size: 15px;
  margin-bottom: 8px;
}
.stat-value {
  color: #1976d2;
  font-size: 28px;
  font-weight: bold;
}
.chart-section {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  padding: 18px 24px 18px 24px;
}
.chart-section h4 {
  margin-bottom: 12px;
  color: #1976d2;
}
.chart-box {
  width: 100%;
  height: 320px;
}
</style>
